<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ToDoList</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./main.css">
    <script src="../Build/react.development.js"></script>
    <script src="../Build/react-dom.development.js"></script>
    <script src="../Build/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      // todolist 输入框
      class Dialog extends React.Component {
        constructor (props) {
          super(props)
          this.myText = React.createRef();
          this.handleClick = this.handleClick.bind(this);
        }
        handleClick () {
          if (!this.myText.current.value) {
            alert('请添加你的任务')
            return 
          }
          const len = this.props.nums;
          const newId = len > 0 ? len : 0;
          const value = this.myText.current.value;
          if (!value !== '') {
            const obj = {
              id: newId,
              name: value,
              status: 0
            };
            this.myText.current.value = '';
            this.props.addNewTask(obj);
          }
        }
        render () {
          return (
            <div className="dialog">
              <div>
                <h3>Task</h3>
                <input type="text" placeholder="今天做什么" ref={this.myText}/>
                <input type="button" value="添加" onClick={this.handleClick}/>
              </div>
            </div>
          )
        }
      }
      // listItem
      class ListItem extends React.Component {
        constructor(props) {
          super(props)
          this.handleFinished = this.handleFinished.bind(this)
          this.handleDelete = this.handleDelete.bind(this)
        }
        // 处理todolist完成
        handleFinished () {
          let status = this.props.item.status
          status = (status === 0 ? 1 : 0)
          let obj = {
            id: this.props.item.id,
            name: this.props.item.name,
            status: status
          }
          this.props.finishChange(obj)
        }
        // 删除todolist一项
        handleDelete () {
          this.props.totalChange(this.props.item)
        }
        render () {
          const item = this.props.item
          const unfinish = {
            backgroundColor: '#DFFCB5',
            color: '#2EB872'
          }
          const finish = {
            backgroundColor: '#FFFA9D',
            color: '#FF9A3C',
            textDecoration: 'line-through'
          }
          var itemStyle = item.status === 0 ? unfinish : finish;
          return (
            <li key={item.id} style={itemStyle}>
              <span onClick={this.handleFinished}
              id={item.id}
              className="check-btn"
              style={{backgroundColor: item.status === 0 ? '#fff': '#A1EAFB'}}>
              </span>
              <span>{item.name}</span>
              <span onClick={this.handleDelete} className="delete-btn">删除</span>
            </li>
          )
        }
      }
      // 数组
      class ToDoList extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            list: [{
              id: 0,
              name: 'react学习',
              status: 0
            }, {
              id: 1,
              name: 'vue学习',
              status: 0
            }],
            finished: 0
          }
        }
        addTask (newItem) {
          var allTask = this.state.list;
          allTask.push(newItem)
          this.setState({
            list: allTask
          });
        }
        updateFinished (todoItem) {
          console.log('------------updateFinished', todoItem);
          var sum = 0;
          this.state.list.forEach((item) => {
            if (item.id === todoItem.id) {
              item.status = todoItem.status;
            }
            if (item.status === 1) {
              sum++;
            }
          });
          this.setState({
            finished: sum
          })
        }
        updateTotal (todoItem) {
          var obj = []
          var sum = 0
          this.state.list.forEach((item) => {
            if (item.id !== todoItem.id) {
              obj.push(item)
              if (item.status === 1) {
                sum++
              }
            }
          })
          this.setState({
            list: obj,
            finished: sum
          })
        }
        render () {
          return (
            <div className="container">
              <h1>toDoList</h1>
              <Dialog addNewTask={this.addTask.bind(this)} nums={this.state.list.length}/>
              <ul>
                {
                  this.state.list.map((item, index) => 
                    <ListItem
                      item={item}
                      finishChange={this.updateFinished.bind(this)}
                      totalChange={this.updateTotal.bind(this)}
                      key={index}>
                    </ListItem>
                  )
                }
                <li>{this.state.finished}已完成&nbsp;/&nbsp;{this.state.list.length}总数</li>
              </ul>
            </div>
          )
        }
      }
      ReactDOM.render(
        <ToDoList/>,
        document.getElementById('app')
      )
    </script>
  </body>
</html>